<template>
  <template v-if="miniMode">
    <div class="column q-pa-md studio-page-left-mini q-gutter-y-md">
      <q-btn
        class="btn-mini"
        square
        size="12px"
        icon="mdi-publish"
        color="accent"
      />
      <q-btn
        class="btn-mini"
        icon="mdi-alert-circle-outline"
        color="secondary"
        text-color="sub"
        size="12px"
        no-caps
      >
        <q-popup-proxy
          anchor="top right"
          self="top left"
          transition-show="flip-right"
          transition-hide="flip-left"
          v-if="video"
        >
          <div class="mini-info-container mini-border q-pa-md">
            <div class="title">{{ video?.title }}</div>
            <div class="view-count">
              {{ video?.viewCount }} views · {{ video?.createTimeLabel }}
            </div>
            <div class="author-info row q-my-md">
              <q-avatar size="34px">
                <img :src="video?.creatorAvatar" />
              </q-avatar>
              <div class="column q-ml-sm">
                <div class="author-name">{{ video?.creatorName }}</div>
                <div class="author-followers" style="color: #808080">
                  {{ video?.creatorFollowersCount }} Followers
                </div>
              </div>
            </div>
            <div class="video-description q-pa-xs">
              {{ video?.description }}
            </div>
          </div>
        </q-popup-proxy>
      </q-btn>
      <q-btn
        dense
        class="btn-mini"
        size="12px"
        color="secondary"
        text-color="sub"
        icon="mdi-playlist-plus"
      >
        <q-popup-proxy
          anchor="top right"
          self="top left"
          transition-show="flip-right"
          transition-hide="flip-left"
          v-if="video"
        >
          <saveto-view :video="video" />
        </q-popup-proxy>
      </q-btn>
      <q-btn
        dense
        class="btn-mini"
        size="12px"
        color="secondary"
        text-color="sub"
        icon="mdi-share-variant"
      >
        <q-popup-proxy
          anchor="top right"
          self="top left"
          transition-show="flip-right"
          transition-hide="flip-left"
          v-if="video"
        >
          <share-view :video="video" />
        </q-popup-proxy>
      </q-btn>
      <q-btn
        dense
        class="btn-mini"
        size="12px"
        color="secondary"
        text-color="sub"
        icon="mdi-pin"
      />
      <q-space />
      <q-btn
        dense
        class="btn-mini"
        size="12px"
        text-color="sub"
        icon="mdi-playlist-plus"
      />
      <q-btn
        dense
        class="btn-mini"
        size="12px"
        text-color="sub"
        icon="mdi-share"
      />
      <q-btn
        dense
        class="btn-mini"
        size="12px"
        text-color="sub"
        icon="mdi-arrow-collapse-right"
        @click="toggleMiniMode"
      />
    </div>
  </template>
  <template v-else>
    <div class="column q-pa-md studio-page-left">
      <div class="video-info" v-if="video">
        <div class="page-title">STUDIO MODE</div>
        <div class="title three-line-text q-my-md">{{ video.title }}</div>
        <div class="author-info row">
          <q-avatar class="q-mr-xs" size="18px">
            <img :src="video.creatorAvatar" />
          </q-avatar>
          <div class="author-name">{{ video.creatorName }}</div>
        </div>
        <div class="row q-ma-sm justify-around">
          <q-btn
            dense
            class="btn-mini q-mr-xs"
            square
            size="12px"
            icon="mdi-publish"
            color="accent"
          />
          <q-btn
            dense
            class="btn-mini q-mr-xs"
            square
            size="12px"
            icon="mdi-playlist-plus"
            text-color="sub"
          >
            <q-popup-proxy
              anchor="top right"
              self="top left"
              transition-show="flip-right"
              transition-hide="flip-left"
            >
              <saveto-view :video="video" />
            </q-popup-proxy>
          </q-btn>
          <q-btn
            dense
            class="btn-mini q-mr-xs"
            square
            size="12px"
            icon="mdi-share-variant"
            text-color="sub"
          >
            <q-popup-proxy
              anchor="top right"
              self="top left"
              transition-show="flip-right"
              transition-hide="flip-left"
            >
              <share-view :video="video" />
            </q-popup-proxy>
          </q-btn>
          <q-btn
            dense
            class="btn-mini q-mr-xs"
            square
            size="12px"
            icon="mdi-pin"
            text-color="sub"
          />
        </div>
      </div>
      <q-separator class="q-my-sm" />
      <div class="my-recodings col column">
        <div class="top row justify-between items-center">
          <div class="title">MY RECODINGS</div>
          <q-btn
            dense
            flat
            square
            size="12px"
            icon="mdi-sort-clock-ascending-outline"
          />
        </div>
        <slot name="project-list"></slot>
        <div class="row justify-between items-center">
          <q-btn
            outlined
            flat
            dense
            size="14px"
            icon="mdi-close-circle-outline"
            @click="goBack"
            label="STUDIO"
          />
          <div class="row items-center">
            <q-btn
              class="q-mr-sm"
              dense
              size="12px"
              icon="mdi-dots-horizontal"
            />
            <q-btn
              dense
              size="12px"
              icon="mdi-arrow-collapse-left"
              @click="toggleMiniMode"
            />
          </div>
        </div>
      </div>
    </div>
  </template>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import Video from 'src/models/Video';
import ShareView from 'components/ShareView.vue';
import SavetoView from '../videoViews/SavetoView.vue';
import { useVideoStore } from 'src/stores/video-store';
const router = useRouter();
const videoStore = useVideoStore();
const miniMode = ref(false);
const video = computed(() => videoStore.currentVideo);
const emit = defineEmits(['toggleMiniMode']);
const goBack = () => {
  router.go(-1);
};
const toggleMiniMode = () => {
  miniMode.value = !miniMode.value;
  emit('toggleMiniMode', miniMode.value);
};
</script>
<style lang="sass" scoped>

.studio-page-left
  width: 205px
  box-shadow: inset -4px 0px 6px 0px rgba(0, 0, 0, .32)
.video-info
  .page-title
    color: #E53748
    font-size: 14px
    font-weight: bold
  .title
    font-size: 16px
    max-width: 185px
  .author-info
    .author-name
      font-size: 12px
      color: $sub
.my-recodings
  color: $sub
  .title
    font-size: 12px
    font-weight: bold
.btn-mini
  width: 30px
  height: 30px
.mini-border
  border: 1px solid #404040
  border-radius: 3px
.mini-info-container
  max-width: 350px
  .title
    font-size: 16px
  .view-count
    color: $sub
</style>
